//评价
var vm = new Vue({
	el: '#app',
	data: function() {
		return {
			dateTime: {
				text: '',
				value: ''
			},
			dwpf:{
				cate1Arr:['及时性', '完整性', '活跃度'],
				cate2Arr:["中铁隧道", "中恒建设", "江西路桥"],
				data1:[randomNum(1, 5), randomNum(1, 5), randomNum(1, 5)],
				data2:[randomNum(1, 3), randomNum(1, 3), randomNum(1, 3)],
				data3:[randomNum(1, 10), randomNum(1, 10), randomNum(1, 10)],
			},
			gnmk:{
				cate1Arr:['文档管理', '投资管理', '事件管理', '进度管理'],
				cate2Arr:["中铁隧道", "中恒建设", "江西路桥"],
				data1:[randomNum(1, 50), randomNum(1, 50), randomNum(1, 50)],
				data2:[randomNum(1, 3), randomNum(1, 3), randomNum(1, 3)],
				data3:[randomNum(1, 10), randomNum(1, 10), randomNum(1, 10)],
				data3:[randomNum(1, 150), randomNum(1, 150), randomNum(1, 150)],
			},
			dlgk:{
				cate1Arr:['在线时长', '登陆次数'],
				cate2Arr:["中铁隧道", "中恒建设", "江西路桥"],
				data1:[randomNum(1, 10), randomNum(1, 10), randomNum(1, 10)],
				data2:[randomNum(10, 15), randomNum(10, 15), randomNum(10, 15)]
			},
			
		}
	},
	mounted: function() {
		var that = this;
		mui.init();
		that.setDate(); //设置初始时间
		mui.ready(function() {
			mui('#mainContent').scroll();
			$('.choseDate').on("tap", function() {
				var picker = new mui.DtPicker({
					type: 'month' //只显示年
				});
				picker.show(function(rs) {
					that.dateTime.text = rs.y.text + '年' + rs.m.text + '月';
					that.dateTime.value = rs.text;
					picker.dispose();
					//日期选择后的事件写在这
					localStorage.setItem('progressDate', rs.y.text + '年' + rs.m.text + '月');
					location.reload();
				})
			});
			$('.toggle-nav').on('tap',function(){
				mui('.mui-off-canvas-wrap').offCanvas('show');
			});
			var myChart = echarts.init(document.getElementById('dwpf'), 'macarons');
			var myChart2 = echarts.init(document.getElementById('gnmk'), 'macarons');
			var myChart3 = echarts.init(document.getElementById('dlgk'), 'macarons');
			var option = {
				backgroundColor: '#ffffff',
				tooltip: {
					trigger: 'axis',
					axisPointer: { // 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				legend: {
					data: that.dwpf.cate1Arr,
					y: 'bottom'
				},
				grid: {
					top: 0,
					left: '3%',
					right: '8%',
					bottom: '8%',
					containLabel: true
				},
				xAxis: {
					type: 'value'
				},
				yAxis: {
					type: 'category',
					data: that.dwpf.cate2Arr
				},
				series: [{
						name: '及时性',
						type: 'bar',
						barWidth: '20',
						stack: '总量',
						label: {
							normal: {
								show: true,
								position: 'insideRight'
							}
						},
						data: that.dwpf.data1
					},
					{
						name: '完整性',
						type: 'bar',
						stack: '总量',
						label: {
							normal: {
								show: true,
								position: 'insideRight'
							}
						},
						data: that.dwpf.data2
					},
					{
						name: '活跃度',
						type: 'bar',
						stack: '总量',
						label: {
							normal: {
								show: true,
								position: 'insideRight'
							}
						},
						data: that.dwpf.data2
					}
				]
			};
			var option2 = {
				backgroundColor: '#ffffff',
				tooltip: {
					trigger: 'axis',
					axisPointer: { // 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				legend: {
					data: that.gnmk.cate1Arr,
					y: 'bottom'
				},
				grid: {
					top: 0,
					left: '2%',
					right: '8%',
					bottom: '8%',
					containLabel: true
				},
				xAxis: {
					type: 'value'
				},
				yAxis: {
					type: 'category',
					data: that.gnmk.cate2Arr
				},
				series: [{
						name: '文档管理',
						type: 'bar',
						barWidth: '20',
						label: {
							normal: {
								show: true,
								position: 'right'
							}
						},
						data: that.gnmk.data1
					},
					{
						name: '投资管理',
						type: 'bar',
						barWidth: '20',
						label: {
							normal: {
								show: true,
								position: 'right'
							}
						},
						data: that.gnmk.data2
					},
					{
						name: '事件管理',
						type: 'bar',
						barWidth: '20',
						label: {
							normal: {
								show: true,
								position: 'right'
							}
						},
						data: that.gnmk.data3
					},
					{
						name: '进度管理',
						type: 'bar',
						barWidth: '20',
						label: {
							normal: {
								show: true,
								position: 'right'
							}
						},
						data: that.gnmk.data4
					}
				]
			};
			var option3 = {
				backgroundColor: '#ffffff',
				tooltip: {
					trigger: 'axis',
					axisPointer: { // 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				legend: {
					data: that.dlgk.cate1Arr,
					y: 'bottom'
				},
				grid: {
					top: 0,
					left: '3%',
					right: '4%',
					bottom: '5%',
					containLabel: true
				},
				xAxis: {
					type: 'value'
				},
				yAxis: {
					type: 'category',
					data: that.dlgk.cate2Arr
				},
				series: [{
						name: '在线时长',
						type: 'bar',
						barWidth: '20',
						label: {
							normal: {
								show: true,
								position: 'right'
							}
						},
						data: that.dlgk.data1
					},
					{
						name: '登陆次数',
						type: 'bar',
						barWidth: '20',
						label: {
							normal: {
								show: true,
								position: 'right'
							}
						},
						data: that.dlgk.data2
					}
				]
			};
			myChart.setOption(option);
			myChart2.setOption(option2);
			myChart3.setOption(option3);
		});
	},
	methods: {
		setDate: function() {
			var that = this;
			var now = new Date();
			var year = now.getFullYear();
			var month = now.getMonth();
			if(month > 1 && month < 9) {
				month = '0' + month;
			}
			var dateText = year + '年' + month + '月';
			var dateValue = year + '-' + month;
			that.dateTime.text = localStorage.getItem('progressDate') || dateText;
			that.dateTime.value = dateValue;
		}
	}
})